.page-footer {
  display: flex;
  flex-wrap: wrap;
  background: $colorBlack;
  color: $colorWhite;
  flex-direction: column;
  padding: 3rem 1.5rem;
  font-size: 0.85rem;
  overflow: hidden;

  @media (min-width: 600px) {
    padding: 3rem 2rem;
    flex-direction: row;
  }

  &__section {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 2rem;
    margin-bottom: -1.5rem;
  }

  &__column {
    flex: 0 0 auto;
    padding-bottom: 1.5rem;
    padding-right: 1.5rem;
    width: 14rem;

    ul {
      list-style: none;
    }

    a {
      &:hover {
        color: $colorYellow;
      }
    }
  }

  &__small-text {
    opacity: 0.5;
  }
}
